M

MLOG

Português

Domine os Error Boundaries do React para construir aplicações resilientes e fáceis de usar. Aprenda as melhores práticas, técnicas de implementação e estratégias avançadas de tratamento de erros.

Error Boundaries em React: Técnicas de Tratamento de Erros para Aplicações Robustas

No mundo dinâmico do desenvolvimento web, criar aplicações robustas e fáceis de usar é fundamental. O React, uma popular biblioteca JavaScript para construir interfaces de usuário, fornece um mecanismo poderoso para lidar com erros de forma elegante: Error Boundaries. Este guia completo aprofunda o conceito de Error Boundaries, explorando seu propósito, implementação e melhores práticas para construir aplicações React resilientes.

Entendendo a Necessidade de Error Boundaries

Componentes React, como qualquer código, são suscetíveis a erros. Esses erros podem surgir de várias fontes, incluindo:

Sem um tratamento de erros adequado, um erro em um componente React pode quebrar toda a aplicação, resultando em uma má experiência do usuário. Os Error Boundaries fornecem uma maneira de capturar esses erros e impedir que eles se propaguem pela árvore de componentes, garantindo que a aplicação permaneça funcional mesmo quando componentes individuais falham.

O que são Error Boundaries em React?

Error Boundaries são componentes React que capturam erros de JavaScript em qualquer lugar na sua árvore de componentes filhos, registram esses erros e exibem uma UI de fallback em vez da árvore de componentes que quebrou. Eles atuam como uma rede de segurança, impedindo que erros quebrem toda a aplicação.

Características principais dos Error Boundaries:

Implementando Error Boundaries

Vamos percorrer o processo de criação de um componente Error Boundary básico:

1. Criando o Componente Error Boundary

Primeiro, crie um novo componente de classe, por exemplo, chamado ErrorBoundary:


import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    // Atualiza o estado para que a próxima renderização mostre a UI de fallback.
    return {
      hasError: true
    };
  }

  componentDidCatch(error, errorInfo) {
    // Você também pode registrar o erro em um serviço de relatórios de erro
    console.error("Caught error: ", error, errorInfo);
    // Exemplo: logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Você pode renderizar qualquer UI de fallback personalizada
      return (
        <div>
          <h2>Algo deu errado.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Explicação:

2. Usando o Error Boundary

Para usar o Error Boundary, simplesmente envolva qualquer componente que possa lançar um erro com o componente ErrorBoundary:


import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  // Este componente pode lançar um erro
  return (
    <ErrorBoundary>
      <PotentiallyBreakingComponent />
    </ErrorBoundary>
  );
}

export default MyComponent;

Se PotentiallyBreakingComponent lançar um erro, o ErrorBoundary o capturará, registrará o erro e renderizará a UI de fallback.

3. Exemplos Ilustrativos com Contexto Global

Considere uma aplicação de e-commerce exibindo informações de produtos buscadas de um servidor remoto. Um componente, ProductDisplay, é responsável por renderizar os detalhes do produto. No entanto, o servidor pode ocasionalmente retornar dados inesperados, levando a erros de renderização.


// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product }) {
  // Simula um erro potencial se product.price não for um número
  if (typeof product.price !== 'number') {
    throw new Error('Preço do produto inválido');
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Preço: {product.price}</p>
      <img src={product.imageUrl} alt={product.name} />
    </div>
  );
}

export default ProductDisplay;

Para se proteger contra tais erros, envolva o componente ProductDisplay com um ErrorBoundary:


// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ProductDisplay from './ProductDisplay';

function App() {
  const product = {
    name: 'Produto Exemplo',
    price: 'Não é um Número', // Dados intencionalmente incorretos
    imageUrl: 'https://example.com/image.jpg'
  };

  return (
    <div>
      <ErrorBoundary>
        <ProductDisplay product={product} />
      </ErrorBoundary>
    </div>
  );
}

export default App;

Neste cenário, como product.price é intencionalmente definido como uma string em vez de um número, o componente ProductDisplay lançará um erro. O ErrorBoundary capturará este erro, impedindo que toda a aplicação quebre, e exibirá a UI de fallback em vez do componente ProductDisplay quebrado.

4. Error Boundaries em Aplicações Internacionalizadas

Ao construir aplicações para um público global, as mensagens de erro devem ser localizadas para fornecer uma melhor experiência do usuário. Os Error Boundaries podem ser usados em conjunto com bibliotecas de internacionalização (i18n) para exibir mensagens de erro traduzidas.


// ErrorBoundary.js (com suporte a i18n)
import React from 'react';
import { useTranslation } from 'react-i18next'; // Assumindo que você está usando react-i18next

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      return (
        <FallbackUI error={this.state.error} errorInfo={this.state.errorInfo}/>
      );
    }

    return this.props.children;
  }
}

const FallbackUI = ({error, errorInfo}) => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('error.title')}</h2>
      <p>{t('error.message')}</p>
      <details style={{ whiteSpace: 'pre-wrap' }}>
        {error && error.toString()}<br />
        {errorInfo?.componentStack}
      </details>
    </div>
  );
}


export default ErrorBoundary;

Neste exemplo, usamos react-i18next para traduzir o título e a mensagem de erro na UI de fallback. As funções t('error.title') e t('error.message') recuperarão as traduções apropriadas com base no idioma selecionado pelo usuário.

5. Considerações para Renderização no Lado do Servidor (SSR)

Ao usar Error Boundaries em aplicações renderizadas no lado do servidor, é crucial lidar com os erros apropriadamente para evitar que o servidor quebre. A documentação do React recomenda que você evite usar Error Boundaries para se recuperar de erros de renderização no servidor. Em vez disso, trate os erros antes de renderizar o componente ou renderize uma página de erro estática no servidor.

Melhores Práticas para Usar Error Boundaries

Estratégias Avançadas de Tratamento de Erros

1. Mecanismos de Tentativa (Retry)

Em alguns casos, pode ser possível se recuperar de um erro tentando novamente a operação que o causou. Por exemplo, se uma requisição de rede falhar, você pode tentar novamente após um curto período. Os Error Boundaries podem ser combinados com mecanismos de tentativa para fornecer uma experiência de usuário mais resiliente.


// ErrorBoundaryWithRetry.js
import React from 'react';

class ErrorBoundaryWithRetry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      retryCount: prevState.retryCount + 1,
    }), () => {
      // Isso força o componente a renderizar novamente. Considere padrões melhores com props controladas.
      this.forceUpdate(); // AVISO: Use com cautela
      if (this.props.onRetry) {
          this.props.onRetry();
      }
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Algo deu errado.</h2>
          <button onClick={this.handleRetry}>Tentar novamente</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundaryWithRetry;

O componente ErrorBoundaryWithRetry inclui um botão de tentativa que, quando clicado, redefine o estado hasError e renderiza novamente os componentes filhos. Você também pode adicionar um retryCount para limitar o número de tentativas. Esta abordagem pode ser especialmente útil para lidar com erros transitórios, como interrupções temporárias de rede. Certifique-se de que a prop `onRetry` seja tratada adequadamente e busque/execute novamente a lógica que pode ter falhado.

2. Feature Flags (Sinalizadores de Funcionalidade)

Feature flags permitem que você ative ou desative funcionalidades em sua aplicação dinamicamente, sem implantar novo código. Os Error Boundaries podem ser usados em conjunto com feature flags para degradar graciosamente a funcionalidade no caso de um erro. Por exemplo, se uma funcionalidade específica está causando erros, você pode desativá-la usando uma feature flag e exibir uma mensagem ao usuário indicando que a funcionalidade está temporariamente indisponível.

3. Padrão Circuit Breaker (Disjuntor)

O padrão circuit breaker é um padrão de design de software usado para impedir que uma aplicação tente repetidamente executar uma operação que provavelmente falhará. Ele funciona monitorando as taxas de sucesso e falha de uma operação e, se a taxa de falha exceder um certo limite, "abre o circuito" e impede novas tentativas de executar a operação por um certo período de tempo. Isso pode ajudar a prevenir falhas em cascata e melhorar a estabilidade geral da aplicação.

Os Error Boundaries podem ser usados para implementar o padrão circuit breaker em aplicações React. Quando um Error Boundary captura um erro, ele pode incrementar um contador de falhas. Se o contador de falhas exceder um limite, o Error Boundary pode exibir uma mensagem ao usuário indicando que a funcionalidade está temporariamente indisponível e impedir novas tentativas de executar a operação. Após um certo período de tempo, o Error Boundary pode "fechar o circuito" e permitir que as tentativas de executar a operação sejam retomadas.

Conclusão

Os Error Boundaries do React são uma ferramenta essencial para construir aplicações robustas e fáceis de usar. Ao implementar Error Boundaries, você pode impedir que erros quebrem toda a sua aplicação, fornecer uma UI de fallback elegante para seus usuários e registrar erros em serviços de monitoramento para depuração e análise. Seguindo as melhores práticas e estratégias avançadas descritas neste guia, você pode construir aplicações React que são resilientes, confiáveis e que oferecem uma experiência de usuário positiva, mesmo diante de erros inesperados. Lembre-se de focar em fornecer mensagens de erro úteis e localizadas para um público global.